<template>
    <div class="lx-header-components">
        <div class="lx-header-inner flex-row-space-center">
            <div class="header-left">
                <NuxtLink to="/">
                    <img class=" blog-logo" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="黄粱一梦的博客" srcset="">
                </NuxtLink>
            </div>
            <div class="header-right">
                <ul class="menu-list">
                    <li class="menu-link">
                        首页
                    </li>
                    <li class="menu-link sec-link">
                        分类
                        <ul class="sub-menu-list">
                            <li class="sub-menu-link">前端</li>
                            <li class="sub-menu-link">后台</li>
                            <li class="sub-menu-link">测试</li>
                            <li class="sub-menu-link">分类</li>
                            <li class="sub-menu-link">数据库</li>
                        </ul>
                    </li>
                    <li class="menu-link">归档</li>
                    <li class="menu-link">标签页</li>
                    <li class="menu-link">友链</li>
                    <li class="menu-link" @click="hf">换肤</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
let hf = () => {
    let theme = document.querySelector('html')?.getAttribute('theme')
    if(!theme || theme == 'light'){
        document.querySelector('html')?.setAttribute('theme','dark')
    }else {
        document.querySelector('html')?.setAttribute('theme','light')
    }
}
</script>

<style lang="scss" scoped>
    .lx-header-components{
        position: sticky;
        top: 0;
        left: 0;
        z-index: 22;
        width: 100%;
        background-color: var(--lx-page-bg-color);
        box-shadow: 0px 2px 8px var(--lx-layer-fill);
        backdrop-filter: blur(18px);
        .lx-header-inner{
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            padding: 0px var(--padding-10);
            .header-left {
                .blog-logo {
                    border-radius: var(--radius-6);
                }
            }
            .header-right {
                .menu-list {
                    .menu-link {
                        cursor: pointer;
                        position: relative;
                        padding: 0px 15px;
                        height: 50px;
                        line-height: 50px;
                        float: left;
                        height: 100%;
                        font-size: 14px;
                        color: var(--lx-text-color-1);
                        .sub-menu-list {
                            height: 0px;
                            overflow: hidden;
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            top: 50px;
                            // border-radius: var(--radius-6);
                            .sub-menu-link {
                                padding: calc(var(--padding-10) / 2) var(--padding-10);
                                color: var(--lx-text-color-1);
                                line-height: 30px;
                                height: 40px;
                                &:hover{
                                    color: var(--lx-primary-color);
                                }
                            }
                        }
                        &::after{
                            content: "";
                            width: 50%;
                            height: 0px;
                            left: 50%;
                            transform: translateX(-50%);
                            position: absolute;
                            bottom: 0px;
                            color: var(--lx-primary-color);
                            background-color: var(--lx-primary-color);
                        }
                        &:hover::after{
                            height: 2px;
                            border-radius: var(--radius-6);
                        }
                        &:hover .sub-menu-list{
                            width: max-content;
                            text-align: center;
                            height: auto;
                            max-height: 1500px;
                            background-color: var(--lx-page-bg-color);
                            box-shadow: var(--lx-shadow-1);
                        }
                    }
                }
            }
        }
    }
</style>